<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" style="left: 30px" @click="showaddbox()"
              >添加用户</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords" clearable>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getdata()"
            ></el-button>
          </el-col>
        </el-row>
        <transition name="el-zoom-in-center">
          <el-table
            :data="datalist"
            height="500"
            border
            style="width: 100%; margin-top: 15px"
            v-show="show"
          >
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="nike" label="昵称"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showeditbox(scope.row)"
                  >编辑信息</el-button
                >
                <el-button
                  type="warning"
                  size="mini"
                  @click="showresetbox(scope.row)"
                  >重置账密</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="deletedata(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-card>
    </template>
    <!-- 添加框 -->
    <el-dialog
      title="提示"
      :visible.sync="addVisible"
      width="30%"
      @close="addDialogClosed"
    >
      <span>添加用户</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="newData"
          ref="addFormRef"
          :rules="addFormRules"
        >
          <el-form-item label="昵称" prop="nike">
            <el-input v-model="newData.nike"></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="loginname">
            <el-input v-model="newData.loginname"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="newData.tel"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="newData.address"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="newData.pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="twicepwd">
            <el-input v-model="newData.twicepwd" type="password"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideaddbox()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 用户编辑 -->
    <el-dialog title="提示" :visible.sync="editVisible" width="30%">
      <span>编辑{{ edit.nike }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="edit"
          ref="editFormRef"
          :rules="editFormRules"
        >
          <el-form-item label="昵称" prop="nike">
            <el-input v-model="edit.nike"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="edit.tel"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="edit.address"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideeditbox()">取 消</el-button>
        <el-button type="primary" @click="updatedata()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重置账密 -->
    <el-dialog title="提示" :visible.sync="restVisible" width="30%" @close="resetref()">
      <span>编辑{{ resetdata.nike }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="resetdata"
          ref="resetFormRef"
          :rules="resetFormRules"
        >
          <el-form-item label="登录帐号" prop="loginname">
            <el-input v-model="resetdata.loginname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="resetdata.pwd" type="password"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="hideresetbox()">取 消</el-button>
        <el-button type="primary" @click="resetdatamethod()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      // 返回一个错误提示
      callback(new Error("请输入合法的手机号码"));
    };
    return {
      resetdata: {
        loginname: "",
        pwd: "",
        nike: "",
        id: "",
      },
      restVisible: false,
      newpwd: "",
      show: false,
      editVisible: false,
      selectRoleId: "",
      searchwords: "",
      edit: {
        nike: "",
        tel: "",
        address: "",
        id: "",
      },
      newData: {
        nike: "",
        loginname: "",
        pwd: "",
        twicepwd: "",
        tel: "",
        address: "",
      },
      addVisible: false,
      datalist: [],
      editFormRules: {
        nike: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "昵称长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        loginname: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          {
            min: 7,
            max: 15,
            message: "登录账号长度在 7 到 15 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入收货地址", trigger: "blur" },
          {
            min: 5,
            max: 30,
            message: "收货地址长度在 5 到 30 个字符",
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
      resetFormRules: {
        loginname: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          {
            min: 7,
            max: 15,
            message: "登录账号长度在 7 到 15 个字符",
            trigger: "blur",
          },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      addFormRules: {
        nike: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "昵称长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        loginname: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          {
            min: 7,
            max: 15,
            message: "登录账号长度在 7 到 15 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入收货地址", trigger: "blur" },
          {
            min: 5,
            max: 30,
            message: "收货地址长度在 5 到 30 个字符",
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        twicepwd: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    hideaddbox() {
      this.addDialogClosed();
      this.addVisible = false;
    },
    hideeditbox() {
      this.editVisible = false;
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    searchdata() {
      if (this.searchwords === "") {
        this.$Message.error("请输入昵称！");
        return;
      }
      this.$http
        .get("getuserbyname", {
          params: {
            token: window.sessionStorage.getItem("token"),
            words: this.searchwords,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$Message.success("查询成功！");
            this.datalist = res.data.data;
            this.searchwords = "";
          } else {
            this.$Message.error("查询失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    getdata() {
      this.$http
        .get("getuser", {
          params: { token: window.sessionStorage.getItem("token") },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.datalist = res.data.data;
          } else {
            this.$Message.error("获取数据失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统出错！" + err);
        });
    },
    showaddbox() {
      this.addVisible = true;
    },
    add() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        if (this.newData.pwd !== this.newData.twicepwd) {
          this.$Message.error("二次输入的密码不一致！");
          return;
        }
        let params = new URLSearchParams();
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("loginname", this.newData.loginname);
        params.append("nike", this.newData.nike);
        params.append("pwd", this.newData.pwd);
        params.append("tel", this.newData.tel);
        params.append("address", this.newData.address);
        this.$http
          .post("adduser", params)
          .then((res) => {
            if (res.data.code == 200) {
              this.$Message.success("添加成功！");
              this.addVisible = false;
              this.getdata();
            } else {
              this.$Message.error(res.data.msg);
            }
          })
          .catch((err) => {
            this.$Message.error("系统错误！" + err);
          });
      });
    },
    showeditbox(obj) {
      this.edit.id = obj.id;
      this.edit.tel = obj.tel;
      this.edit.nike = obj.nike;
      this.edit.address = obj.address;
      this.editVisible = true;
    },
    updatedata() {
      this.$confirm("此操作将重新编辑该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("token", window.sessionStorage.token);
          params.append("id", this.edit.id);
          params.append("tel", this.edit.tel);
          params.append("nike", this.edit.nike);
          params.append("address", this.edit.address);
          this.$http
            .post("updateuser", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("更新成功！");
                this.editVisible = false;
                this.getdata();
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
    deletedata(id) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("id", id);
          params.append("token", window.sessionStorage.getItem("token"));
          this.$http
            .post("deleteuser", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除成功！");
                this.getdata();
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showresetbox(obj) {
      this.resetdata.id = obj.id;
      this.resetdata.loginname = obj.loginname;
      this.resetdata.nike = obj.nike;
      this.restVisible = true;
    },
    resetdatamethod() {
      this.$refs.resetFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        this.$confirm("此操作将重置该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = new URLSearchParams();
            params.append("token", window.sessionStorage.token);
            params.append("id", this.resetdata.id);
            params.append("loginname", this.resetdata.loginname);
            params.append("pwd", this.resetdata.pwd);
            this.$http
              .post("resetuser", params)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$Message.success("更新成功！");
                  this.resetdata = {};
                  this.restVisible = false;
                  this.getdata();
                } else {
                  this.$Message.error(res.data.msg);
                }
              })
              .catch((err) => {
                this.$Message.error("系统错误！" + err);
              });
          })
          .catch(() => {
            this.$Message({
              type: "info",
              message: "已取消编辑",
            });
          });
      });
    },
    hideresetbox() {
      this.newpwd = "";
      this.restVisible = false;
    },
    resetref() {
      this.$refs.resetFormRef.resetFields()
    },
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
</style>
